<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                访问量<span class="layui-badge layui-bg-blue pull-right">周</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font">9,999,666</p>
                <p>总计访问量<span class="pull-right">88万 <i class="layui-icon layui-icon-flag"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                下载<span class="layui-badge layui-bg-black pull-right">月</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font">33,555</p>
                <p>新下载<span class="pull-right">10% <i class="layui-icon layui-icon-download-circle"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                Start<span class="layui-badge layui-bg-green pull-right">周</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font">999,666</p>
                <p>总Start数<span class="pull-right">88万 <i class="layui-icon layui-icon-rate"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                活跃用户<span class="layui-badge layui-bg-orange pull-right">月</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font">66,666</p>
                <p>最近一个月<span class="pull-right">15% <i class="layui-icon layui-icon-user"></i></span></p>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15">
    <div class="layui-col-lg8 layui-col-md7">
        <div class="layui-card">
            <div class="layui-card-header">更新日志</div>
            <div class="layui-card-body">
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">V2.0
                                <small>发布全新版本</small>&emsp;<span class="layui-badge-rim">2018-06-28</span>
                            </h3>
                            <ul>
                                <li>使用IDEA、SpringBoot、SpringSecurity、OAuth2重构后台部分</li>
                                <li>前端引入pandyle.js，填补layui模板引擎的短板</li>
                                <li>前端采用模块化开发方式，定义admin、config等公用模块，封装ajax请求</li>
                                <li>界面优化，借鉴layadmin的设计风格，改版登录页面</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">V1.1&emsp;<span class="layui-badge-rim">2018-02-11</span>
                            </h3>
                            <ul>
                                <li>加入侧导航栏折叠效果，并且自适应移动端展示，移动端与PC端的折叠效果完全不同</li>
                                <li>加入gif图形验证码功能</li>
                                <li>完成EasyWeb的Readme介绍文档和JWTPermission的开发文档的编写</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">V1.0&emsp;<span class="layui-badge-rim">2018-01-26</span>
                            </h3>
                            <ul>
                                <li>引入q.js作为前端页面的路由框架</li>
                                <li>完成了第一个基于基于jquery的前后端分离框架，适用于对vue、react等框架了解不深的广大后端程序员</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">V0.1&emsp;<span class="layui-badge-rim">2018-01-02</span>
                            </h3>
                            <ul>
                                <li>将公司原本基于shiro的平台改造成前后端分离模式</li>
                                <li>去除Shiro，基于jjwt自主设计出JwtPermission框架，完成对Shiro的替代</li>
                                <li>去除AdminLTE框架，使用layui框架重新改造</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">
                                EasyWeb默默开发中...&emsp;<span class="layui-badge-rim">更早</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="layui-col-lg4 layui-col-md5">
        <div class="layui-card">
            <div class="layui-card-header">后台框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>核心框架</td>
                        <td>Spring、Spring MVC、Spring Boot</td>
                    </tr>
                    <tr>
                        <td>持久层</td>
                        <td>MyBatis、Druid、<a href="http://mp.baomidou.com" target="_blank">MyBatis-Plus</a></td>
                    </tr>
                    <tr>
                        <td>权限框架</td>
                        <td>Spring Security、OAuth2.0</td>
                    </tr>
                    <tr>
                        <td>Star Fork</td>
                        <td style="padding-bottom: 3px;">
                            <iframe src="http://ghbtns.com/github-btn.html?user=whvcse&amp;repo=easyweb&amp;type=watch&amp;count=true&amp;size=medium"
                                    allowtransparency="true" frameborder="0" scrolling="0" width="100px"
                                    height="20px"></iframe>
                            <iframe src="http://ghbtns.com/github-btn.html?user=whvcse&amp;repo=easyweb&amp;type=fork&amp;count=true&amp;size=medium"
                                    allowtransparency="true" frameborder="0" scrolling="0" width="100px"
                                    height="20px"></iframe>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">前端框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>核心框架</td>
                        <td><a href="http://www.layui.com/" target="_blank">layui-v2.3.0</a></td>
                    </tr>
                    <tr>
                        <td>路由框架</td>
                        <td><a href="https://github.com/itorr/q.js" target="_blank">q.js</a>（纯js轻量级路由框架）</td>
                    </tr>
                    <tr>
                        <td>mvvm框架</td>
                        <td><a href="https://gitee.com/pandarrr/pandyle" target="_blank">pandyle.js</a>（专为jquery编写的mvvm库）
                        </td>
                    </tr>
                    <tr>
                        <td>主要特色</td>
                        <td>单页面 / 响应式 / 简约 / 极易上手</td>
                    </tr>
                    <tr>
                        <td>获取源码</td>
                        <td style="padding-bottom: 0">
                            <div class="layui-btn-container">
                                <a href="https://gitee.com/whvse/EasyWeb" target="_blank"
                                   class="layui-btn layui-btn-danger">后台代码</a>
                                <a href="https://gitee.com/whvse/EasyWebPage" target="_blank" class="layui-btn">前端页面</a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">友情链接</div>
            <div class="layui-card-body">
                <div class="layui-carousel admin-carousel admin-news">
                    <div carousel-item>
                        <div>
                            <a href="http://www.layui.com/" target="_blank" class="layui-bg-green">layui - 经典模块化前端框架</a>
                        </div>
                        <div>
                            <a href="http://www.layui.com/admin/" target="_blank" class="layui-bg-cyan">layuiAdmin -
                                layui官方后台模板</a>
                        </div>
                        <div>
                            <a href="http://fly.layui.com/case/2018/" target="_blank" class="layui-bg-blue">发现layui年度最佳案例</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['carousel', 'element'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        var device = layui.device;

        layui.link('assets/css/console.css');
        // 渲染轮播
        carousel.render({
            elem: '.layui-carousel',
            width: '100%',
            height: '60px',
            arrow: 'none',
            autoplay: true,
            trigger: device.ios || device.android ? 'click' : 'hover',
            anim: 'fade'
        });
    });
</script>